<template>
  <div class="comment-reply-container">
     <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      :title="currentComment.reply_count+'条回复'"
      fixed
    >
      <template #left>
        <van-icon name="cross" @click="$emit('close')"/>
      </template>
    </van-nav-bar>

    <!-- 内容区域 -->
    <div class="scroll-wrap">
      <!-- 文章评论 -->
      <CommentItem :comment="currentComment"/>

      <!-- 评论回复区 -->
      <van-cell title="全部回复"></van-cell>
      <!-- sourceId是评论id type表示回复评论 -->
      <CommentList ref="comment-list" :sourceId="currentComment.com_id" type="c" />
    </div>

    <!-- 底部评论区 -->
    <div class="reply-btn">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="isPostShow=true"
      >写评论</van-button>
    </div>

    <!-- 回复文章评论弹框 -->
    <!-- 当vant弹框组件不设置高度时,实际的高度会以内容的高度来自适应 -->
    <van-popup v-model="isPostShow" position="bottom">
      <!-- 提交的输入框,思考是直接写在这里,还是封装组件 - 封装组件,因为会被其他页面用到 -->
      <CommentPost :targetId="currentComment.com_id" :artId="articleId" @post-success="postSuccessFn"/>
    </van-popup>
  </div>
</template>

<script>
/*
  目标1: 发现评论回复列表的结构和功能与文章评论的结构完全一致, 唯一区别在于查询列表是数组的接口参数type:c有所不同
  1. 需要保证原本commentList组件中接口调用的数据逻辑不会发生改变 - 将原本的type=a设置为默认的父组件传参
  2. 在通过自定义属性的方式来修改部分的接口传参数据
*/
import CommentItem from './commentItem.vue'
import CommentList from './commentList'
import CommentPost from './commentPost'
export default {
  name: 'CommentReply',
  props: {
    currentComment: {
      type: Object,
      default: () => ({})
    },
    articleId: {
      type: String,
      default: ''
    }
  },
  components: {
    CommentItem,
    CommentList,
    CommentPost
  },
  data () {
    return {
      isPostShow: false, // 写评论框的状态
      currentCommentClone: this.currentComment // 点击回复的那一条评论数据
    }
  },
  methods: {
    // 提交评论成功
    postSuccessFn (item) {
      // 在评论列表头部添加新的评论内容
      // 将commentPost组件传递过来的元素,添加到commentList组件的list数组中
      // 通过ref和$refs来调用子组件的添加操作,给子组件的list添加数据
      this.$refs['comment-list'].unshiftComment(item)
      this.currentCommentClone.reply_count++
      // 关闭评论弹出层
      this.isPostShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.comment-reply-container{
  .van-nav-bar {
    background-color: #fff;
    :deep(.van-nav-bar__title) {
      color: #000;
    }
    .van-icon-cross{
      color: #000;
    }
  }
  .scroll-wrap{
    position: fixed;
    top: 92px;
    bottom: 88px;
    left: 0;
    right: 0;
    overflow-y: auto;
  }
  .reply-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #d8d8d8;
    .comment-btn {
      width: 70%;
    }
  }
}
</style>
